<div [@routerTransition]>
    <div class="m-login__signin">
        <div class="m-login__head">
            <h3 class="m-login__title">
                {{l("ChangePassword")}}
            </h3>
        </div>
        <form #resetPassForm="ngForm" class="m-login__form" method="post" (ngSubmit)="save()">
            <p>
                {{l("PleaseEnterYourNewPassword")}}
            </p>

            <div class="form-group m-form__group">
                <input type="password" name="Password" class="form-control placeholder-no-fix" [(ngModel)]="model.password" #Password="ngModel" placeholder="{{l('Password')}}" validateEqual="PasswordRepeat"
                       reverse="true" [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </div>
            <div [hidden]="resetPassForm.form.valid || resetPassForm.form.pristine" class="form-group">
                <ul class="help-block text-danger" *ngIf="Password.errors">
                    <li [hidden]="!Password.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}</li>
                    <li [hidden]="!Password.errors.requireLowercase">{{l("PasswordComplexity_RequireLowercase_Hint")}}</li>
                    <li [hidden]="!Password.errors.requireUppercase">{{l("PasswordComplexity_RequireUppercase_Hint")}}</li>
                    <li [hidden]="!Password.errors.requireNonAlphanumeric">{{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}</li>
                    <li [hidden]="!Password.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint", passwordComplexitySetting.requiredLength)}}</li>
                </ul>
            </div>

            <div class="form-group m-form__group">
                <input type="password" name="PasswordRepeat" class="form-control placeholder-no-fix" [ngModel]="model.passwordRepeat" #PasswordRepeat="ngModel" placeholder="{{l('PasswordRepeat')}}" validateEqual="Password"
                       reverse="false" [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </div>
            <div [hidden]="resetPassForm.form.valid || resetPassForm.form.pristine" class="form-group">
                <ul class="help-block text-danger" *ngIf="PasswordRepeat.errors">
                    <li [hidden]="!PasswordRepeat.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requireLowercase">{{l("PasswordComplexity_RequireLowercase_Hint")}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requireUppercase">{{l("PasswordComplexity_RequireUppercase_Hint")}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">{{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}</li>
                    <li [hidden]="!PasswordRepeat.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint", passwordComplexitySetting.requiredLength)}}</li>
                    <li [hidden]="PasswordRepeat.valid">{{l("PasswordsDontMatch")}}</li>
                </ul>
            </div>

            <div class="m-login__form-action">
                <button [disabled]="saving" routerLink="/account/login" type="button" class="btn btn-outline-primary  m-btn m-btn--pill m-btn--custom"><i class="fa fa-arrow-left"></i> {{l("Back")}}</button>
                <button type="submit" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--air" [disabled]="!resetPassForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-check"></i> {{l("Submit")}}</button>
            </div>

        </form>
    </div>
</div>



